<!DOCTYPE HTML>
<html>
  <head>
    <title>Page 1</title>
  </head>
  <body class="page-1-page">
    <h1>Page 1</h1>
    <div class="blue" id="1234" name="foo">
      <p>Test Div</p>

      <a href="index.html" class="link">Back to Index</a>

      <div class="user">
        <span class="name">Chris K.</span>
      </div>
      <div class="user">
        <span class="name">Grace H.</span>
      </div>
      <div class="user">
        <span class="name">Same User</span>
      </div>
      <div class="user">
        <span class="name">Same User</span>
      </div>
      <div class="user">
        <span class="name">Visible User</span>
      </div>

      <div class="invisible-elements" style="display: none;">A</div>
      <div class="invisible-elements" style="display: none;">B</div>
      <div class="invisible-elements" style="display: none;">C</div>

      <ul>
          <li>A</li>
          <li>B</li>
          <li>C</li>
          <li>D</li>
      </ul>
      <p id="visible">Visible</p>
      <p id="invisible" style="display:none">Invisible</p>
      <p id="off-the-page" style="position:absolute;top:-300px;">Off the page</p>
    </div>

    <div class="inner-text">
      <p>
        Inner Text
      </p>
      <p>
        More inner text
      </p>
    </div>

    <div class="lots-of-text">
      Text
      Text 2
    </div>
    
    <span>Single quotes aren't hard</span>

    <p class="plus-one">+ 1</p>

    <div id="same-selectors-with-different-visibilities">
      <span class="conflicting">Visible</span>
      <span class="conflicting">Visible</span>
      <span class="conflicting" style="display: none;">Visible</span>
    </div>

    <span an-attribute="an-attribute-value">Span text</span>

    <span data-role="a-data-attribute">A data attribute</span>
  </body>
</html>
